<template>
	<view style="height: 100%;">
		<u-navbar :title="name" :title-size="36" :title-width="500" title-color="#fff" back-icon-name="arrow-left"
			back-icon-color="#fff" :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content" style="">
			<div class="policeCon">
				
				<div class='policeBox'>
				<div class="policeTitle" @click="addPerson">
					<span style="font-size: 32rpx;color: #333" >添加人员<u-icon name="plus-circle-fill" style="margin-left: 10rpx;" color="#4187f1" size="50" v-if="showSend" ></u-icon></span>
					<span><em>{{avatarList.length}}人</em><i class="icon_right_gray"></i></span>
				</div>
				<ul class="avatarList">
					<li v-for="(item,index) in avatarList" :key="index">
						 <img src="../../../assets/images/home/avatar.png"/>
					</li>
				</ul>
				</div>
				<div class="policeList">
					<ul>
					  <li v-for="(item,index) in messageList" :key="index" :class="item.itself ? 'poRight' : ''">
					    <span class="left">
					      <img src="../../../assets/images/home/avatar.png"/>
					    </span>
					    <div class="right">
					      <span class="name">{{item.senderName}}</span>
					      <p>{{item.message}}</p>
					    </div>
					  </li>
					</ul>
				</div>
			</div>
			 <div class="sendBox" v-show="showSend  && avatarList">
				<!-- <div class='sings'></div> -->
				<u-input  v-model="message" placeholder="输入发送内容" maxlength="300" :clearable="false"></u-input>
				<u-button  type="primary" shape="square" class="send" @click="websocketsend">发送</u-button>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'policeCon',
		onLoad(option) {
			this.avatarList = []
		  this.userList();
			this.name = option.name
			this.meetId = option.meetId
			this.userId = option.userId
			this.status = option.status
			uni.$on('add',(info)=>{  //开启监听全局的地址改变事件
				this.personList = info.data
				let userIdList = [];
				this.avatarList  = []
				this.personList.map(item => {
						if (item.checked) {
							userIdList.push(item.id)
							this.avatarList.push(item)
						}
					})
					this.form.id = this.meetId;
					this.form.userIdList = userIdList;
					this.$api.reqApi.editMeetUser(this.form).then(res => {
						
					})
		   })
		},
		onShow () {  //onshow里面更新选中人员
		  
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				name: '',
				showSend:true,
				avatarList: [],
				message:'',
				messageList: [],
				meetId:'',
				userId:'',
				status:'',
				personList:[],
				form:{
					name:''
				}
			};
		},
		methods: {
			goBack() {
				if(this.websock && this.websock.close){
				  this.websock.close(); //断开连接
				}
				uni.navigateBack()
			},

			userList() {
				if(this.meetId){
				this.$api.reqApi.getMeetUserList({meetId:this.meetId}).then(res => {
					if (res.code == 200) {
						this.avatarList = res.data
						this.$api.reqApi.userListAll().then(ress => {
							if(ress.code == 200){
								ress.data.forEach((item,index)=>{
									res.data.forEach((items,i)=>{
										if(item.id == items.id){
											item.checked = true
										}
									})
								})
								this.personList = ress.data
							}
						})
					}
				})
				}
			},
			addPerson(){
				// uni.navigateTo({url: '/pages/scheduling/policeConsultation/addPolice?meetId='+this.meetId+'&list='+ encodeURIComponent(JSON.stringify(this.avatarList))});
				uni.navigateTo({url: '/pages/scheduling/policeConsultation/addUser?id='+this.meetId+'&list='+ encodeURIComponent(JSON.stringify(this.personList))});
			},
			initWebSocket(url) {
				this.websock = new WebSocket(url)
				this.websock.onopenonopen = this.websocketonopen;
				this.websock.onmessage = this.websocketonmessage;
				this.websock.onerror = this.websocketonerror;
				this.websock.onclose = this.websocketclose;
			},
			websocketonopen() {
				// let data = {
				//   code: 0,
				//   msg: '这是client：初次连接'
				// };
				// this.websocketsend(data)
				console.log('WebSocket连接');

			},
			websocketonerror() {
				console.log('WebSocket连接失败');
			},
			// 数据接收
			websocketonmessage(e) {
				console.log('数据接收' + e.data);
				let data = JSON.parse(e.data);
				if (data.data.code != "closeAll") {
					if (data.data.message) {
						if (data.data.sender == this.userId) {
							data.data.itself = true
						}
						this.messageList.push(data.data)
					}
				} else {
					this.websock.close();
					this.showSend = false;
					uni.showToast({
						icon:'none',
						type: 'warning',
					    title:data.data.message
					})
				}
				this.scrollToBottom()
			},
			// 数据发送
			websocketsend(Data) {
				var data = {
					message: this.message,
					code: "send",
				}
				this.websock.send(JSON.stringify(data));
				this.message = "";
				this.messageList.push()
				this.scrollToBottom()
			},
			// 关闭
			websocketclose(e) {
				console.log('已关闭连接', e);
			},
			closeDialog() {
				this.websock.close(); //断开连接
				// this.$emit("close");
			},
		    process(id, userId) {  //进行中的聊天记录
			  let self = this;
			  self.$api.reqApi.getZTMeetListMessage({meetId:id}).then(res => {
			  	if (res.code == 200) {
					self.messageList = res.data
					self.initWebSocket(`${self.wbUrl}/websocket/${id}/${userId}`);
			  	}
			  })
			},
			end(id) {  //已结束的聊天记录  getMeetListMessage
				let self = this;
				self.$api.reqApi.getMeetListMessage({meetId:id}).then(res => {
					if (res.code == 200) {
						self.messageList = res.data
					}
				})
			},
			scrollToBottom(){
        this.$nextTick(()=>{
         let box = this.$el.querySelector(".policeList")
         box.scrollTop = box.scrollHeight
        })
       }
		},
		mounted() {
			 this.userList()
			 this.scrollToBottom()
		   if(this.status == 1 ){  //进行中
		       this.showSend = true;
			   this.process(this.meetId,this.userId)
		   }else{  //2为已结束
		        this.showSend = false;
			    this.end(this.meetId)
		   }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// margin: 30rpx;
		background: #f0f2f4;
		position: relative;
		height:calc(100% - 200rpx);
		padding-bottom: 110rpx;
	}
	uni-page-body {
		background-color: #fff;
	}
	.policeCon {
	  border-bottom: 1px solid #e3e5e8;
	  // padding: 30rpx;
		height: 100%;
	  
	}
	.policeTitle {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  >span{
		  display: flex;
		  align-items: center;
	  }
	  em{
		font-style: inherit;
		color: #999;
		font-size: 28rpx;
	  }
	  ::v-deep .addPerson {
	    span {
	      font-size: 12px;
	    }
	    height: 24px;
	    width: 74px;
	  }
	}
	.avatarList {
	  margin: 20rpx 0 0rpx;
	  li {
	    display: inline-block;
	    width:68rpx;
	    height:68rpx;
	    margin-right: 24rpx;
	    margin-bottom: 12rpx;
	    img {
	      width: 100%;
	      border-radius: 4px;
	      vertical-align: middle;
	      margin-right: 3px;
	    }
	  }
	}
	.policeList {
		height:calc(100% - 210rpx);
		overflow-y: auto;
	  li {
	    overflow: hidden;
	    margin-top: 30rpx;
	  }
		li:last-child{
			padding-bottom: 30rpx;
		}
	  .poRight {
	    .left {
	      float: right;
	      margin-left: 20rpx;
	    }
	    .right {
	      float: right;
	      text-align: right;
	      p {
	        text-align: left;
	        border-top-left-radius: 6px;
	        border-top-right-radius: 0px;
	        border-bottom-right-radius: 6px;
	        border-bottom-left-radius: 6px;
	      }
	    }
	  }
	  .left {
	    display: inline-block;
	    width: 68rpx;
	    height: 68rpx;
	    border-radius: 100%;
	    float: left;
	    margin-right: 10px;
		margin-left: 20rpx;
	    img {
	      width: 100%;
	      border-radius: 4px;
	    }
	  }
	  .right {
	    float: left;
	    width: calc(100% - 100px);
	    .name {
	      color: #7c8396;
	      margin-bottom: 5px;
	      display: block;
	    }
	    p {
	      background-color: #fff;
	      padding: 6px;
	      border-top-left-radius: 0px;
	      border-top-right-radius: 6px;
	      border-bottom-right-radius: 6px;
	      border-bottom-left-radius: 6px;
	      color: #202227;
	      display: inline-block;
	    }
	  }
	}
	.sendBox {
	  display: flex;
		width: 100%;
	  // margin-bottom: 40rpx;
		position: absolute;
		height: 68rpx;
		bottom: 20rpx;
	      margin-top: 25px;
				justify-content: space-between;
				flex-wrap:nowrap;
				::v-deep .uni-input-wrapper{
					bottom: 0;
				}
	  ::v-deep .el-input__inner {
	    border-radius: 0;
	    height: 72rpx;
	    line-height: 72rpx;
	    border-right: 0;
		
	  }
	  .send {
	    height: 72rpx;
			// border: 1px solid #48a2d9;
			border-left: 0;
			margin-left: -3px;
			background-color: transparent!important;
			color: #7c8396;
			float: left;
	  }
	}
	.policeBox {
		padding: 30rpx;
		background: #fff;
	}

	::v-deep .uni-input-wrapper {
		width: 580rpx;
		background: #fff;
		border-radius: 10px;
		position: absolute;
		bottom: 30rpx;
		left: 28rpx;
		.uni-input-placeholder {
			padding-left: 20rpx;
		}
		.uni-input-input{
			text-indent: 10px;
		}
	}
	.sings {
		width: 32rpx;
		height: 32rpx;
		background: url(../taskManage/image/icon_sing.png) no-repeat;
		background-size:  100% 100%;
		position: absolute;
		    left: 18px;
			bottom: 40rpx;
	}
</style>
